﻿<div class="sample_title">Datagrid Search</div>


sample:<br />
<div class="sample_preview">
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        $(document).ready(function() {
            // Create Datagrid
            $('#datagrid3').grid(
            {
                title: 'User',
                url: gs_path + '/ITUser/GetData',
                colModel: [{ name: 'user_id', label: 'User ID' },
	                       { name: 'password', label: 'Password', hide: true },
	                       { name: 'user_name', label: 'User Name', width: 200 },
                           { name: 'description', label: 'Deskripsi' },
                           { name: 'email', label: 'Email', width: 160 },
                           { name: 'last_login', label: 'Login Terakhir', type: 'date', align: 'center' },
                           { name: 'status', hide: true },
                           { name: 'status_name', label: 'Status', align: 'center', width: 60}],
                sortname: 'user_id',
                sortorder: 'asc',
                searchitems:
		        [{ name: 'user_id', label: 'User ID' },
	                { name: 'user_name', label: 'User Name', isdefault: true },
	                { name: 'last_login', label: 'Login Terakhir', type: 'date', range: true, from: '01/01/2012', to: '01/01/2015' }
		        ]
            });
            $('#datagrid3 .pSearch').trigger('click');
        });
        //--><!]]></script>
    <div id="datagrid3"></div>
</div><br />
code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            // Create Datagrid
            $('#datagrid').grid(
            {
                title: 'User',
                url: gs_path + '/ITUser/GetData',
                colModel: [{ name: 'user_id', label: 'User ID' },
	                       { name: 'password', label: 'Password', hide: true },
	                       { name: 'user_name', label: 'User Name', width: 200 },
                           { name: 'description', label: 'Deskripsi' },
                           { name: 'email', label: 'Email', width: 160 },
                           { name: 'last_login', label: 'Login Terakhir', type: 'date', align: 'center' },
                           { name: 'status', hide:true },
                           { name: 'status_name', label: 'Status', align:'center', width:60 }],
                sortname: 'user_id',
                sortorder: 'asc',
	            searchitems:
		        [   { name: 'user_id', label: 'User ID' },
	                { name: 'user_name', label: 'User Name', isdefault: true },
	                { name: 'last_login', label: 'Login Terakhir', type:'date', range:true, from:'01/01/2012', to:'01/01/2015' }
		        ]
            });
        });
    &lt;/script&gt;
        
    &lt;div id="datagrid"&gt;&lt;/div&gt;
    <% for (int i = 0, max_i = 21; i < max_i; i++) { Response.Write("<br />"); } %>
</div>

<br />
<fieldset>
    <legend>searchitems Configuration</legend>
    <table class="tb_apiconfig">
    <tr>
        <td class="label">name <font color="red"><sup>*</sup></font></td>
        <td><font color="blue">(string) default: null</font><br />
            Column Search Name (must be unique)
        </td>
    </tr>
    <tr>
        <td class="label">label</td>
        <td><font color="blue">(string)</font><br />
            Label Of Field Search Column (if not set, then Label will be named same as name)
        </td>
    </tr>
    <tr>
        <td class="label">value</td>
        <td><font color="blue">(string) default: ''</font><br />
            Set default keyword value of search field
        </td>
    </tr>
    <tr>
        <td class="label">type</td>
        <td><font color="blue">(string) default: text</font><br />
            Set Type of Field Search Column, option : [ text, numeric, date, <i>percent_bar</i> ]
        </td>
    </tr>
    <tr>
        <td class="label">precision</td>
        <td><font color="blue">(numeric) default: 0</font><br />
            Set Precision of number format (only used when <u>type</u> is <u>numeric</u>)
        </td>
    </tr>
    <tr>
        <td class="label">range</td>
        <td><font color="blue">(boolean) default: false</font><br />
            Set Searching Method is range, (automatic <u>false</u> when <u>type</u> is <u>text</u>)
        </td>
    </tr>
    <tr>
        <td class="label">from</td>
        <td><font color="blue">(string) default: ''</font><br />
            Set default keyword "from value" of search field (used when <u>range</u> is <u>true</u>)
        </td>
    </tr>
    <tr>
        <td class="label">value</td>
        <td><font color="blue">(string) default: ''</font><br />
            Set default keyword "to value" of search field (used when <u>range</u> is <u>true</u>)
        </td>
    </tr>
    </table>
</fieldset>